iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
2
自我挑戰組

vue.js 30天學習軌跡系列 第 21

Day21 vue.js - 元件插槽Slot

  • 分享至 

  • xImage
  •  

插槽可幫助您在components 中放置內容,
允許以嚴格的父子關係以外的其他方式來組合components

單個插槽(Single Slot)

使用<slot>將元件裡的裡面的字樣顯示出來。

 <div id="app">
  <component>hello</component>   
</div>

<script type="text/x-template" id="SlotComponent">
  <div class="box">
    <h6>我是一個元件</h6>
    <slot>
      如果未指定任何內容,這是默認內容。
    </slot>
  </div>
</script>
Vue.component('component', {
  template: '#SlotComponent',
});

 new Vue({
  el: '#app',
});

但是如果元件裡面為空的時候,就會顯示子元件中 <slot> 內的默認內容

 <div id="app">
  <component></component>   
</div>

範例/images/emoticon/emoticon37.gif

具名插槽(Named slots)

往往只有一個插槽是無法滿足的,這時候就可以使用命名插槽
<slot>中加上name屬性決定配置的內容,
並在要替換的部分給上 slot屬性,且相同的名子。

 <div id="app">
  <component>
    <template slot="header">我要來替換掉原本的header字樣</template>
    <template slot="text">我要來替換掉原本的內容內容</template>
    <h5 slot="footer">我要來替換掉原本的footer字樣</h5>
   </component>  
</div>


<script type="text/x-template" id="SlotComponent">
  <div class="card">
    <div class="card-header">
      <slot name="header">我是預設header</slot>
    </div>
    <div class="card-body">      
      <slot name="text" class="card-text">這邊是預設body</slot>
    </div>
    <div class="card-footer">
      <slot name="footer">我是預設footer</slot>
  </div>
  </div>
</script>
Vue.component('component', {
  template: '#SlotComponent',
});

 new Vue({
  el: '#app',
});

範例/images/emoticon/emoticon37.gif

/images/emoticon/emoticon08.gif


上一篇
Day20 vue.js - 使用 $emit 向外傳遞
下一篇
Day22 vue.js - 動態元件 Dynamic Components
系列文
vue.js 30天學習軌跡30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言